<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <!-- <div :style="'background-color:' + bgcolor + ';'"> -->
        <div :style="{ height: heightValue, width: contentWidth, }" class="block" v-cloak>
            <!-- <div class="line" :style="{ borderBottomColor: bgcolor, borderBottomStyle: module.styleName }"></div> -->
            <!-- <div :style="{ height: heightValue, background: bgcolor, borderRadius: 0 }"></div> -->
            <div class="line" :style="{borderRadius: contentBorderRadius,backgroundColor: contentColor,}"></div>
        </div>
    <!-- </div> -->
</template>


<script>
export default {
    data () {
        return {
            loading: false,
        };
    },
    props: {
        module: { type: Object, default: {} },
    },

    mounted: function () { },

    computed: {
        heightValue: function () {
            var h = this.module.height;
            if (!h) {
                return "auto";
            }
            return h.value + "px";
        },
        bgcolor(){
            if (this.module.background.cat == "auto"){
                return this.$store.state.myconfig.color.primary || '#1989fa'
            } else if (this.module.background.cat == "custom") {
                return this.module.background.color
            } else {
                return 'rgba(255,255,255,1)'
            }
        },
        contentBorderRadius(){
            if(this.module.content_radius.editAllRadius){
                return this.module.content_radius.lefttop + 'px' + ' ' + this.module.content_radius.righttop + 'px' + ' ' + this.module.content_radius.rightbottom + 'px' + ' ' + this.module.content_radius.leftbottom + 'px'
            } else {
                return this.module.content_radius.value + 'px'
            }
        },
        contentWidth(){
            if(!this.module.content_width){
                return '100%'
            }
            return this.module.content_width + 'px'
        },
        contentColor(){
            return this.module.content_color || '#ffffff'
        },
    },

    methods: {},
};
</script>

<style scoped>
.block {
    min-height: 10px;
    margin: 0 auto;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
}

.line {
    height: 100%;
    background: #fff;
    /* border-radius: ; */
    width: 100%;
    border-radius: inherit;
}
</style>